import { View, Image, Text, Video, Switch } from "@tarojs/components";
import ico_jiantou_one from "@/assets/image/ico_jiantou_one.svg";
import { useState } from "react";
import { AtImagePicker } from "taro-ui";
import ico_del_two from "@/assets/image/ico_del_two.svg";
import "./index.scss";
import { uploadFilesList } from "@/helper/utils";
import { insertAd } from "@/services/entities/all";
import ChooseStore from "@/components/view/ChooseStore";
import Taro from "@tarojs/taro";

const SingleAd = (props) => {
  const { onDelete, initValue, isAdded, onChange, onAdd } = props;
  const [isAddedState, setIsAddedState] = useState(isAdded);
  const [form, setForm] = useState(initValue);
  const [isShow, setIsShow] = useState(false);

  const disabled = isAddedState;

  const handleChange = (key, value, storeName?) => {
    if (disabled) {
      return;
    }
    const temp = { ...form };
    if (key === "storeId") {
      temp.storeName = storeName;
    }
    temp[key] = value;
    onChange(temp);
    setForm(temp);
  };

  const chooseImage = (value: any) => {
    console.log("value", value);
    if (disabled) {
      return;
    }
    uploadFilesList(value).then((res) => {
      handleChange(
        "imageUrl",
        res?.map((item) => item.data)
      );
    });
  };
  const chooseVideo = () => {
    if (disabled) {
      return;
    }
    Taro.chooseVideo({
      sourceType: ["album", "camera"],
      maxDuration: 60,
      camera: "back",
      success: function (res) {
        uploadFilesList([{ file: { path: res.tempFilePath } }]).then(
          (res2: any) => {
            console.log("1111", res2[0].data);
            handleChange("videoUrl", res2[0].data);
          }
        );
      },
    });
  };

  const submit = () => {
    const result = {
      imageUrl: form.imageUrl.join(","),
      videoUrl: form.videoUrl,
      storeId: form.storeId,
      isOpen: form.isOpen,
    };
    insertAd(result).then(() => {
      setIsAddedState(true);
      onAdd?.();
    });
  };

  return (
    <View className="child flex-column mt-16 pd-16 pt-32 border-bpx bg-ffffff">
      <View className="dis-flex align-center justify-between">
        <View className="fs-30 lh-42 cl-black dis-flex align-center">
          <Text>{`广告封面`}</Text>
          {isAdded && <View className="is-open flex-center ml-14">已上架</View>}
        </View>

        {!isAdded && (
          <View
            className="submit flex-center cl-007DDB fs-24 pd-lr-24 pd-tb-6 border-box"
            onClick={submit}
          >
            提交
          </View>
        )}
      </View>
      <View className="flex-column bg-FAFAFA pd-lr-18 pd-tb-28 br-16 mt-32">
        <Text className="mb-28 pl-20 border-box fs-28 lh-36 cl-848484">
          首屏广告图
        </Text>
        <AtImagePicker
          className="picker"
          files={
            form.imageUrl?.length
              ? form.imageUrl.map((item) => {
                  return { url: item };
                })
              : []
          }
          count={1}
          multiple={true}
          onChange={(files) => {
            chooseImage(files);
          }}
        ></AtImagePicker>
        <Text className="mg-tb-28 pl-20 border-box fs-28 lh-36 cl-848484">
          首屏广告视频
        </Text>
        <View class="dis-flex">
          <View
            className="upload ml-20 fs-40 flex-center"
            onClick={chooseVideo}
          >
            {form.videoUrl ? (
              <Video className="video" src={form.videoUrl}></Video>
            ) : (
              <View className="add">
                <View className="add-bar"></View>
                <View className="add-bar-line"></View>
              </View>
            )}
          </View>
          {form.videoUrl && (
            <Text
              className="cl-E14848 fs-32 ml-12"
              onClick={() => {
                handleChange("videoUrl", "");
              }}
            >
              删除
            </Text>
          )}
        </View>
        <Text className="mt-40 fs-28 lh-38 cl-black">广告链接商家：</Text>
        <View className="dis-flex pd-lr-26 border-box bg-ffffff mt-16">
          <View className="flex-1 fs-26 lh-32 cl-848484 pd-tb-24 border-box">
            商家链接：
          </View>
          <View
            className="border-bottom flex-3 fs-26 lh-32 cl-black pd-tb-24 border-box dis-flex align-center justify-between"
            onClick={() => {
              setIsShow(true);
            }}
          >
            <Text className="fs-24 lh-32 cl-C2C2C2">
              {form.storeName ? form.storeName : "请选择商家"}
            </Text>
            <Image src={ico_jiantou_one} className="img-32" />
          </View>
        </View>
        {isShow && (
          <ChooseStore
            isShow={isShow}
            setIsShow={setIsShow}
            onChange={(shop) => {
              handleChange("storeId", shop.value, shop.label);
            }}
          ></ChooseStore>
        )}
        <View className="dis-flex justify-between mt-20">
          <View className="dis-flex align-center">
            <Text className="cl-848484 fs-30 lh-40">默认广告</Text>
          </View>
          <Switch
            className="switch"
            onChange={(e) => {
              handleChange("isOpen", e.detail.value);
            }}
            checked={form.isOpen}
          />
        </View>
      </View>
      <View className="flex-center mt-20" onClick={onDelete}>
        <Image src={ico_del_two} className="img-36" />
        <Text className="ml-8 fs-28 lh-38 cl-E14848">删除</Text>
      </View>
    </View>
  );
};
export default SingleAd;
